<template>

  <div>
    <!--
       $set
         Vue2缺点
            对象的原有属性是响应式的，新增修改它并非响应式
            this.$set(对象,'key',修改后值)
            数组,原数组修改是有响应式的，push... ,直接修改非响应式
            this.$set(数组,下标，修改后值)

    -->
    <h4> {{ obj }}</h4>
    <button @click="objxg">新镇修改对象</button>
    <hr>
    <h4>{{ arr }}</h4>
    <button @click="arrs">修改arr</button>

  </div>

</template>

<script>
export default {
  data() {
    return {
      obj: {
        naem: '张三'
      },
      arr: [1, 2, 3]
    }
  },
  methods: {
    objxg() {
    //   this.obj.age = 19
      this.$set(this.obj, 'age', 19)
    },
    arrs() {
    //   this.arr.splice(0, 1, 999)
    //   this.arr[0] = 999
      this.$set(this.arr, 0, 999)
    }
  }
}
</script>

<style>

</style>
